<script setup>
import SearchIcon from '@renderer/assets/svg/search.svg'

defineEmits(['update:modelValue'])

defineProps({
    placeholder: String,
    modelValue: String
})
</script>

<template>
    <div class="search-bar">
        <img :src="SearchIcon" />
        <input
            type="text"
            :placeholder="placeholder"
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
        />
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';

$search-bar-radius: 5px;
$search-icon-size: 15px;
$search-bar-padding: 10px;
$gap-between-icon-input: 3px;

.search-bar {
    @include overspread;
    background-color: var(--bg-color-5);
    border-radius: $search-bar-radius;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: space-between;

    img {
        @include set-size($search-icon-size, $search-icon-size);
        @include img-dye($color: var(--fg-color-2), $offset: 300px);
        margin-left: $search-bar-padding;
    }

    input {
        width: calc(100% - ($search-icon-size + 2 * $search-bar-padding + $gap-between-icon-input));
        margin-left: $gap-between-icon-input;
        margin-right: $search-bar-padding;
        outline: none;
        border: none;
        color: var(--fg-color-2);
        background-color: transparent;
        font-size: 13px;
        padding-top: 1px;

        &::-webkit-input-placeholder {
            color: var(--fg-color-2);
            font-size: 13px;
        }
    }
}
</style>
